<!DOCTYPE html>
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://portal.agileai.com" prefix="pt" %>
<%@ page import="java.util.List"%>
<%@ page import="com.agileai.portal.driver.model.MenuBar"%>
<%@ page import="com.agileai.portal.driver.model.MenuItem"%>
<%@ page import="com.agileai.portal.driver.model.Page"%>
<%@ page import="com.agileai.portal.extend.mobile.MobileHelper"%>
<%@ page import="com.agileai.portal.driver.mobile.AngularWidget"%>
<%@ page import="com.agileai.portal.controller.mobile.AppModule"%>
<%
MenuBar menuBar = (MenuBar)request.getAttribute("_currentMenuBar_");
MobileHelper mobileHelper = new MobileHelper((HttpServletRequest)request);
MenuItem menuItem = (MenuItem)request.getAttribute("_currentMenuItem_");
Page pageModel = (Page)request.getAttribute("_currentPage_");

String title = menuItem.getName();
if (menuItem.getProperties() != null && menuItem.getProperties().has("title")){
	  title = menuItem.getProperties().getString("title");
}	
%>
<ion-view view-title="<%=title%>">
  	<div class="card home-card top-module" style="margin:0px 0px;padding-top: 0px;">
		<div class="item tabs tabs-secondary tabs-icon-top">
			<a href="#/tab/signin-page" class="tab-item active" >
			<i class="icon ion-android-time" ></i>签到</a>
			<a href="#/tab/signout-page" class="tab-item active" >
			<i class="icon ion-android-time" ></i>签退</a>
			<a href="#/tab/location-page" class="tab-item active" >
			<i class="icon ion-android-pin" ></i>定位</a>
			<a href="#/tab/viewdetail-list" class="tab-item active" >
			<i class="icon ion-android-search" ></i>查看</a>
		</div>
	</div>
  <%=mobileHelper.getTemplateContent(menuItem)%>
  <ion-content class="overall-background-color">
  	<div class="card home-card" style="margin:0px 0px;padding-top: 0px;">
		<div class="item tabs tabs-secondary tabs-icon-top" style="border-style:none;background:#E6E6E6;;height:70px">
		</div>
	</div>  
<div class="item mui-content" style="padding: 0px;">
 <% List<AppModule> appModuleList = mobileHelper.getAppModuleList();
  if(appModuleList.size()<16){ %>
    <ul class="mui-table-view mui-grid-view mui-grid-9">
    <%
    	for(int i=0;i<appModuleList.size();i++){ 
    		AppModule appModule = appModuleList.get(i);
    %>
    	<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
         <a href="<%=appModule.getMethod()%>">
          	<i class="icon <%=appModule.getCss()%>"></i>
          	<div style="font-size:10px;padding-top:5px;"><%=appModule.getName()%></div>
         </a>
        </li>
    <%	}%>
    	<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
         <a href="#/tab/module-conf-list">
          	<i class="icon ion-plus-round" style="font-size: 40px;"></i>
         </a>
        </li>
    </ul> 
  <%
  	}else {
  	%>   
	<div id="Gallery" class="mui-slider">
		<div class="mui-slider-group">
			<div class="mui-slider-item">
				<ul class="mui-table-view mui-grid-view mui-grid-9" style="background-color: #fff;">
					<% for(int i=0;i<16;i++){   
							AppModule appModule = appModuleList.get(i);
					%>
	 				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			         <a href="<%=appModule.getMethod()%>">
			          	<i class="icon <%=appModule.getCss()%>"></i>
			          	<div style="font-size:10px;padding-top:5px;"><%=appModule.getName()%></div>
			         </a>
			        </li>
	 						<%}%>
				</ul>
			</div>
			<div class="mui-slider-item">
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<%    	for(int i=16;i<appModuleList.size();i++){   
									AppModule appModule1 = appModuleList.get(i);
						%>
	 						<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
			         <a href="<%=appModule1.getMethod()%>">
			          	<i class="icon <%=appModule1.getCss()%>"></i>
			          	<div style="font-size:10px;padding-top:5px;"><%=appModule1.getName()%></div>
			         </a>
			        </li>
	 						<%}%>
	 						<li class="mui-table-view-cell mui-media  mui-col-sm-3">
			         <a href="#/tab/module-conf-list">
			          	<i class="icon ion-plus-round" style="font-size: 40px;"></i>
			         </a>
			        </li>
				</ul>
			</div>
		</div>
		<div class="mui-slider-indicator">
			<div class="mui-indicator mui-active"></div>
			<div class="mui-indicator"></div>
		</div>
	</div>
</div>
  <%} %>
<%
List<AngularWidget> angularWidgetList = mobileHelper.getAngularWidgetList(pageModel);
for (int i=0;i < angularWidgetList.size();i++){
	AngularWidget angularWidget = (AngularWidget)angularWidgetList.get(i);
%>
	<div ui-view="<%=angularWidget.getCode()%>"></div>
<%}%> 
  <div class="padding">
	<button class="button button-block button-balanced" ng-click="openAddWidgetModal()">添加卡片</button>
  </div>
  </ion-content>
</ion-view>